rollup-plugin-replace

What is rollup-plugin-replace?

The rollup-plugin-replace package is a Rollup plugin that allows you to replace strings in files while bundling. This is particularly useful for replacing environment variables or other constants in your code during the build process.

What are rollup-plugin-replace's main functionalities?

Replace Environment Variables

This feature allows you to replace environment variables in your code. In the example, the `process.env.NODE_ENV` variable is replaced with the string 'production'. This is useful for setting different configurations for development and production environments.

import replace from 'rollup-plugin-replace';

export default {
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

Replace Custom Strings

This feature allows you to replace custom strings in your code. In the example, the `__buildDate__` placeholder is replaced with the current date. This can be useful for embedding build metadata directly into your code.

import replace from 'rollup-plugin-replace';

export default {
  plugins: [
    replace({
      '__buildDate__': () => JSON.stringify(new Date())
    })
  ]
};

Other packages similar to rollup-plugin-replace

rollup-plugin-inject-process-env

The rollup-plugin-inject-process-env package is similar to rollup-plugin-replace in that it allows you to inject environment variables into your code. However, it is specifically designed for injecting `process.env` variables, making it a more specialized tool compared to the more general-purpose rollup-plugin-replace.

vite-plugin-replace

vite-plugin-replace is a Vite plugin that provides similar functionality to rollup-plugin-replace, allowing you to replace strings in your code. It is specifically designed for use with Vite, a build tool that uses Rollup under the hood, and offers a more integrated experience for Vite users.

README

rollup-plugin-replace

Replace strings in files while bundling them.

Installation

npm install --save-dev rollup-plugin-replace

Usage

Generally, you need to ensure that rollup-plugin-replace goes before other things (like rollup-plugin-commonjs) in your plugins array, so that those plugins can apply any optimisations such as dead code removal.

// rollup.config.js
import replace from 'rollup-plugin-replace';

export default {
  // ...
  plugins: [
    replace({
      ENVIRONMENT: JSON.stringify('production')
    })
  ]
};

Options

{
  // a minimatch pattern, or array of patterns, of files that
  // should be processed by this plugin (if omitted, all files
  // are included by default)...
  include: 'config.js',

  // ...and those that shouldn't, if `include` is otherwise
  // too permissive
  exclude: 'node_modules/**',

  // To replace every occurrence of `<@foo@>` instead of every
  // occurrence of `foo`, supply delimiters
  delimiters: ['<@', '@>'],

  // All other options are treated as `string: replacement`
  // replacers...
  VERSION: '1.0.0',
  ENVIRONMENT: JSON.stringify('development'),

  // or `string: (id) => replacement` functions...
  __dirname: (id) => `'${path.dirname(id)}'`,

  // ...unless you want to be careful about separating
  // values from other options, in which case you can:
  values: {
    VERSION: '1.0.0',
    ENVIRONMENT: JSON.stringify('development')
  }
}

Word boundaries

By default, values will only match if they are surrounded by word boundaries — i.e. with options like this...

{
  changed: 'replaced'
}

...and code like this...

console.log('changed');
console.log('unchanged');

...the result will be this:

console.log('replaced');
console.log('unchanged');

If that's not what you want, specify empty strings as delimiters:

{
  changed: 'replaced',
  delimiters: ['', '']
}

License

MIT

Changelog

2.2.0

2019-04-10

• Add index.d.ts typings file (#31)